<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in data" :key="index">
                <p style="text-align: left;color: rgba(38,162,255,.8);font-size: 14px">
                    {{item.dateVal}}
                    <mt-button plain @click="clickIcon(item,index)">
                        <icon clazz="icon-arrow-right-copy" style="width: 18px;height: 18px;"></icon>
                    </mt-button>
                </p>
                <p style="font-size: 36px;color: rgba(38,162,255,1);font-weight: bolder;padding: 20px 0">
                    ￥{{price}}
                </p>
                <p style="text-align: left;color: gray;border-top: dotted 1px #d9d9d9;padding: 10px 0">
                    <span>水量</span>
                    <span style="float: right">{{volume}}m³</span>
                </p>
            </div>
        </div>
    </div>
</template>
<script>
    import 'swiper/dist/css/swiper.css'
    import Swiper from 'swiper'

    export default {
        data() {
            return {
                mySwiper: null,
            }
        },
        props: {
            data: {
                type: Array,
                default() {
                    return []
                }
            },
            initialIndex: {
                type: Number,
                default: 1
            },
            price: {
                type: Number,
                default: 0
            },
            volume: {
                type: Number,
                default: 0
            }
        },
        methods: {
            init() {
                this.mySwiper = new Swiper('.swiper-container', {
                    effect: 'coverflow',
                    slidesPerView: 1.5,
                    spaceBetween: 10,
                    centeredSlides: true,
                    initialSlide: this.initialIndex,//初始化索引
                    loop: false,
                    autoplay: false,//可选选项，自动滑动

                    on: {
                        slideChange: () => {
                            this.$emit('change')
                        },
                    },
                })
            },
            clickIcon(item, index) {
                this.$emit('click', item, index)
            }
        },
        mounted() {
            this.init()
        }
    }
</script>
<style>
    .swiper-container {
        width: 100%;
    }

    .swiper-slide {
        margin: 20px 0;
    }

    .swiper-slide-active {
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0, 0, 0, .5);
    }

    .swiper-container .mint-button {
        height: 15px;
        vertical-align: bottom;
    }

    .swiper-container .mint-button--normal {
        padding: 0;
    }

    .swiper-container .mint-button--default.is-plain {
        color: rgba(38, 162, 255, 0.8);
    }
</style>
